<template>
<div class="package">
    <el-row :gutter="20">
        <el-col :md="12" :xs="24">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>套餐</span>
                    </div>
                </template>
                <div>
                    <el-table :data="state.vip_record" border stripe style="width: 100%">
                        <el-table-column prop="id" label="编号" width="180" />
                        <el-table-column prop="name" label="备注" width="180" />
                        <el-table-column prop="price" label="价格" width="180" />
                        <el-table-column prop="end_time" label="到期时间" />
                    </el-table>
                </div>
            </el-card>
        </el-col>
        <el-col :md="12" :xs="24">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>使用记录</span>
                    </div>
                </template>
                <div>
                    <el-table :data="state.vip_log" border stripe style="width: 100%">
                        <el-table-column prop="id" label="编号" width="180" />
                        <el-table-column prop="remark" label="备注" width="180" />
                        <el-table-column prop="num" label="消耗（次数）" width="180" />
                        <el-table-column prop="create_time" label="时间" />
                    </el-table>
                </div>
            </el-card>
        </el-col>
    </el-row>
</div>
</template>

<script setup lang="ts">
import {reactive, onMounted} from 'vue'
import { get_vip_record, get_vip_log } from '/@/api/frontend/chat/user'

const state =  reactive({
    vip_record: [],
    vip_log: []
})

// 加载完成
onMounted(() => {
    get_vip_record({}).then(res => {
        state.vip_record = res.data
    })
    get_vip_log({}).then(res => {
        state.vip_log = res.data
    })
})
</script>

<style scoped lang="scss">
.package {
    padding: 2px;
}
</style>
